<template>
  <el-card shadow="never" class="commonFunc-box">
    <div slot="header" class="portal-common-title">
      <span>{{ title }}</span>
    </div>
    <div class="commonFunc-box-body">
      <div
        class="item com-hover"
        @click="toPage(item)"
        v-for="(item, i) in menuList"
        :key="i"
      >
        <!-- <i
          :class="item.icon"
          :style="{ color: item.iconBackgroundColor || '#1890FF' }"
        ></i> -->
        <div class="menu_item_div">
          <i :class="item.icon + ' menu_item'"></i>
        </div>
        <p class="name">{{ item.fullName }}</p>
      </div>
    </div>
  </el-card>
</template>
<script>
import AppLink from "./Link";
import { getToken } from "@/utils/auth";
export default {
  components: { AppLink },
  props: {
    title: { type: String, default: "" },
    list: { type: Array, default: () => [] },
  },
  data() {
    return {
      menuList: [],
    };
  },
  created() {
    this.getList();
  },
  watch: {
    list: {
      handler(val) {
        this.getList();
      },
      deep: true,
    },
  },
  computed: {
    baseApi() {
      // return "https://gl.bringspring.com/jsbos-manager";
      return window.config.VUE_APP_BASE_API;
    },
  },
  methods: {
    async toPage(item) {
      console.log(item);
      let url = item.path;
      // this.$store.dispatch("tagsView/closeAll");
      // const res = await this.$store.dispatch("user/getInfo", item.parentId);
      // console.log(res, "-------");
      // const accessRoutes = await this.$store.dispatch(
      //   "permission/generateRoutes",
      //   res
      // );
      // accessRoutes[0].redirect = item.path;
      // this.$router.addRoutes(accessRoutes);
      let path = this.$router.resolve({
        path: url,
        query: { applicationId: item.parentId },
      });
      console.log(this.baseApi, "++++++++");
      window.open(this.baseApi + "/" + path.href, "_blank");
    },
    getList() {
      let list = this.list.filter((o) => o.id);
      list = list.map((o) => {
        let path = "/" + o.urlAddress;
        // 大屏
        if (o.type == 6) {
          let propertyJson = o.propertyJson ? JSON.parse(o.propertyJson) : null,
            moduleId = "";
          if (propertyJson) moduleId = propertyJson.moduleId || "";
          path = `${this.define.dataV}/view/${moduleId}?token=${getToken()}`;
        }
        if (o.type == 7) {
          if (o.linkTarget === "_self") {
            path = "/" + o.enCode;
          } else {
            path = o.urlAddress
              .replace(/\${dataV}/g, this.define.dataV)
              .replace(/\${jsbosToken}/g, getToken());
          }
        }
        return {
          ...o,
          path,
        };
      });
      this.menuList = list;
    },
  },
};
</script>
<style lang="scss" scoped>
.commonFunc-box {
  height: 100%;
  .portal-common-title {
    span {
      border-left: none !important;
    }
  }
  >>> .el-card__body {
    width: 100%;
    height: calc(100% - 55px);
  }
  >>> .el-card__header {
    border-bottom: none;
  }
  .commonFunc-box-body {
    padding: 0 30px;
    height: 100%;
    // display: flex;
    justify-content: space-between;
    // align-items: center;
    .item {
      display: inline-block;
      text-align: center;
      cursor: pointer;
      width: 120px;
      margin-bottom: 23px;
      i {
        display: inline-block;
        height: 40px;
        font-size: 40px;
        margin-bottom: 10px;
      }
      .name {
        font-size: 14px;
        line-height: 20px;
        color: rgba(0, 0, 0, 0.7);
      }
    }
    .menu_item_div {
      display: inline-block;
      width: 36px;
      height: 36px;
      border-radius: 6px;
      background-color: #f2f3f5;
      margin-bottom: 12px;
    }
    .menu_item {
      font-size: 20px !important;
      color: #4e5969;
      line-height: 36px;
    }
  }
}
</style>
